<template>
  <div>
    <!-- table部分 -->
    <div class="mg-0_5em">
      <div class="w-100 mb-0_5em flex-container flex-row-left">
        <el-button type="primary" :icon="CirclePlus" @click="openAuthDialog(false, { id: '0', authName: '无' })"> 添加权限 </el-button>
      </div>

      <el-table :data="authList" border row-key="id" table-layout="auto">
        <el-table-column prop="authName" label="权限名称" align="left" min-width="160" />
        <el-table-column prop="authCode" label="权限编码" align="left" min-width="160">
          <template #default="{ row }">
            <span class="mouse-copy" v-copy="row.authCode">{{ row.authCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authType" label="权限类型" width="100">
          <template #default="{ row }">
            <el-tag class="hand" :type="AuthTypeEnum.getEnumByValue(row.authType).tag" @click="openMenuDrawer(row)">
              <svg-icon :icon-class="AuthTypeEnum.getEnumByValue(row.authType).icon" />
              {{ AuthTypeEnum.getEnumByValue(row.authType).label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="authDesc" label="权限描述" min-width="300" />
        <el-table-column prop="weight" label="权重排序" width="90" />
        <el-table-column label="操作" align="center" width="40">
          <template #default="{ row }">
            <el-popover placement="right" width="280" trigger="hover" :popper-style="{ 'background-color': '#ecf5ff', 'border-color': 'white' }">
              <template #reference>
                <el-button type="primary" size="small" :icon="Setting"></el-button>
              </template>
              <div class="flex-container flex-row-center">
                <div v-if="AuthTypeEnum.getEnumByValue(row.authType) === AuthTypeEnum.MENU">
                  <el-button type="primary" size="small" :icon="CirclePlus" @click="openAuthDialog(false, row)"> 新建子级 </el-button>
                </div>
                <div class="ml-1em">
                  <el-button type="primary" size="small" :icon="Edit" @click="openAuthDialog(true, row)">修改 </el-button>
                </div>
                <div class="ml-1em">
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="Delete"
                    icon-color="red"
                    title="确定删除?"
                    @confirm="deleteAuth(row)">
                    <template #reference>
                      <div>
                        <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                      </div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-drawer v-model="showMenuDrawer" direction="rtl">
      <template #default>
        <div>
          <el-descriptions title="菜单信息" :column="1" border>
            <el-descriptions-item label="name">{{ menuDrawerData.menuName }}</el-descriptions-item>
            <el-descriptions-item label="url">{{ menuDrawerData.menuPath }}</el-descriptions-item>
            <el-descriptions-item label="标题">{{ menuDrawerData.menuTitle }}</el-descriptions-item>
            <el-descriptions-item label="图标">
              <svg-icon :icon-class="menuDrawerData.menuIcon" />
            </el-descriptions-item>
            <el-descriptions-item label="排序值">{{ menuDrawerData.weight }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </el-drawer>

    <edit-auth ref="editAuthRef" :menu-auth-list="menuAuthList" @success="initAuthList"></edit-auth>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete, CirclePlus, Edit, Setting } from '@element-plus/icons-vue'
import Auth from '@/api/sys/auth'
import { isNotEmpty } from '@/utils/validate'
import EditAuth from './components/EditAuth.vue'
import AuthTypeEnum from '@/enums/AuthTypeEnum'
import { ElMessage } from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue'

// 生命周期, 初始化数据
onMounted(() => {
  initAuthList()
})

/**
 * 权限数据
 */
const authList = ref([])

// 菜单权限集合
const menuAuthList = ref([])

/**
 * 初始化列表
 */
async function initAuthList() {
  const { result } = await Auth.list()
  if (isNotEmpty(result)) {
    authList.value = result
    // 过滤出菜单权限，传给编辑组件使用
    filterMenuAuthList(menuAuthList.value, result)
  }
}

/**
 * 递归过滤出菜单权限, 传给编辑组件使用
 * @param menuAuthList 菜单权限集合
 * @param authListTemp 子权限
 */
function filterMenuAuthList(menuAuthList, authListTemp) {
  authListTemp.forEach((item) => {
    if (item.authType === AuthTypeEnum.MENU.value) {
      menuAuthList.push(item)
      if (isNotEmpty(item.children)) {
        filterMenuAuthList(menuAuthList, item.children)
      }
    }
  })
}

// 展示菜单内容标识
const showMenuDrawer = ref(false)

// 当前展示菜单的信息
const menuDrawerData = ref({})

/**
 * 打开菜单抽屉
 * @param row 当前行
 */
function openMenuDrawer(row) {
  if (row.menu) {
    menuDrawerData.value = row.menu
    showMenuDrawer.value = true
  }
}

// 编辑组件
const editAuthRef = ref()

/**
 * 打开弹框
 * @param edit true表示修改，false表示新增
 * @param row 当前行
 */
function openAuthDialog(edit, row) {
  // 新增时候定义默认权限父级ID是0
  let auth = {
    id: '',
    parentId: row.id,
    parentName: '',
    authCode: '',
    authName: '',
    authDesc: '',
    authType: 0,
    weight: 1,
    menu: {
      menuName: '',
      menuTitle: '',
      menuPath: '',
      component: '',
      menuIcon: '',
    },
  }
  // 修改时候将 row 赋值给 auth
  edit && Object.assign(auth, row)
  editAuthRef.value.switchDialog(edit, auth)
}

/**
 * 根据ID查询某个节点
 * @param children 子节点
 * @param id   ID
 */
function findAuthById(children, id) {
  for (let i = 0; i < children.length; i++) {
    if (children[i].id === id) {
      return children[i]
    }
    if (isNotEmpty(children[i].children)) {
      let auth = findAuthById(children[i].children, id)
      if (auth) {
        return auth
      }
    }
  }
  return null
}

/**
 * 删除
 */
function deleteAuth(auth) {
  if (isNotEmpty(auth.children)) {
    ElMessage.error('该权限存在子级不能删除')
  } else {
    Auth.delete(auth.id).then(() => {
      initAuthList()
    })
  }
}
</script>

<style lang="scss" scoped>
@for $i from 1 through 100 {
  :deep(.el-table__body) {
    .el-table__row:nth-child(#{$i}) {
      opacity: 0;
      animation: table-show 300ms $i * 25ms forwards ease-out;
    }
  }
}
</style>
